<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getContextPath();
	String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+basePath+"/";
	request.setAttribute("path",path);
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>样片详情</title>
	<script type="text/javascript" src="js/jquery1.12.js"></script>
	<link href="css/style.css" rel="stylesheet" media="all">
	<script src="js/flickity-docs.min.js"></script> 
	<link rel="shortcut icon" href="img/favicon.png">
</head>
<body>
	<!--<header class="top_header">
		<h1><a href="javascript:history.go(-1);" class="go_back"></a><span>青春校园</span><a class="share_a"></a></h1>
	</header> header -->
	<div class="content_wrap kasampledet_wrap">
		<div class="kasample_txt_wrap">
			<img src="${path}${theme.advertisingMap}" alt="${theme.themeName}">
			<div class="kasample_txt">
				<p class="kasample_name">${theme.themeName}</p>
				<p class="postion:absolute;bottom:0;">
					¥${theme.price}</p>
				<div class="clear"></div>
			</div>
			<h1><a href="javascript:history.go(-1);" class="go_back"></a></h1>
			
			
		</div><!-- kasample_txt -->
		<a href="./kdIndex" style="position:absolute;top:10px;right:10px;">
			<img src="./img/home_24.png" width="25px" height="auto" />
		</a>

		<ul class="kasampledet_ul">
			<li>
				<i class="kasampledet_icon icon_time"></i>
				<p class="kasampledet_txt">
					<span>时长</span>
					<span class="yellow_txt">${theme.duration}小时</span>
				</p>
				<div class="clear"></div>
			</li>
			<li class="center">
				<i class="kasampledet_icon icon_film"></i>
				<p class="kasampledet_txt">
					<span>底片 </span>
					<span class="yellow_txt">${theme.negative}张</span>
				</p>
				<div class="clear"></div>
			</li>
			<li>
				<i class="kasampledet_icon icon_finish"></i>
				<p class="kasampledet_txt">
					<span>精修 </span>
					<span class="yellow_txt">${theme.decoration}张</span>
				</p>
				<div class="clear"></div>
			</li>
			<li>
				<i class="kasampledet_icon icon_shot"></i>
				<p class="kasampledet_txt">
					<span>拍摄 </span>
					<span class="yellow_txt">${theme.series}组</span>
				</p>
				<div class="clear"></div>
			</li>
			<li class="center">
				<i class="kasampledet_icon icon_clothing"></i>
				<p class="kasampledet_txt">
					<span>服装 </span>
					<span class="yellow_txt">不提供</span>
				</p>
				<div class="clear"></div>
			</li>
			<li>
				<i class="kasampledet_icon icon_makeup"></i>
				<p class="kasampledet_txt">
					<span>化妆 </span>
					<span class="yellow_txt">提供</span>
				</p>
				<div class="clear"></div>
			</li>
			<div class="clear"></div>
			<div class="kasampledet_a"><a href="#" onclick="ShowDiv('Mypay','fade')" >查看详情</a></div>
		</ul><!-- kasampledet_ul -->
		
		<!--
		<div class="ka_samplerel example duo">
			<h4><p><span>服务样片</span></p></h4>	
			<div class="example__demo duo__cell">
			<ul class="gallery js-flickity" data-flickity-options='{ "wrapAround": true }'>
				<div class="gallery-cell">
					<a href="../web/kaSampleSer.html"><img src="img/samplerel_img_01.jpg">
					<span>青春校园</span></a>
				</div>
				<div class="gallery-cell">
					<a href="../web/kaSampleSer.html"><img src="img/samplerel_img_01.jpg">
					<span>青春校园</span></a>
				</div>
				<div class="gallery-cell">
					<a href="../web/kaSampleSer.html"><img src="img/samplerel_img_01.jpg">
					<span>青春校园</span></a>
				</div>
				<div class="gallery-cell">
					<a href="../web/kaSampleSer.html"><img src="img/samplerel_img_01.jpg">
					<span>青春校园</span></a>
				</div>
				<div class="clear"></div>
				
			</ul>
			</div>
		</div><!-- 
		-->
		
		<!--
		<a class="ka_reltop" href="./kaThemePhotoList?themeId=${theme.id}" style="padding:10px;background-color:#f2f2f2;border-radius:5px;">
						<div class="rel_img" style="border-radius:0%;border-width:0;width:30%;height:90px;">
						<img src="http://www.kaaction.com/Admin${theme.advertisingMap}" style="border-radius:0%;width:100%;height:auto;">
						 <img src="${path }${theme.advertisingMap}" style="border-radius:0%;width:100%;height:auto;">
						
						<span class="dummy"></span></div>
						<div class="rel_txt" style="width:50%;">
							<span class="rel_tl" style="color:black;">${theme.themeName}</span>
							<span class="rel_price" style="color:black;">￥<span style="color:black;">${theme.price}</span></span>
							<span class="rel_name" style="color:black;">摄影师  |<span style="color:black;"> ${photographer.name }</span></span>
						</div>
						<div class="clear"></div>
						<img class="ka_relgo" src="img/icon/icon_nz_02.png" >
					</a>
		-->
		
					<a class="ka_reltop" href="./kaThemePhotoList?themeId=${theme.id}" style="padding:10px;background-color:#f2f2f2;border-radius:0px;">
						<div class="rel_img" style="border-radius:0%;border-width:0;width:35%;height:80px;margin:auto 0;">
							<img src="http://www.kaaction.com/Admin${theme.advertisingMap}" style="border-radius:0%;width:120px;height:80px;">
						<span class="dummy"></span></div>
						<div class="rel_txt" style="width:60%;margin-left:10px;">
							<span class="rel_tl" style="color:black;">${theme.themeName}</span>
							<span class="rel_price" style="color:black;">￥<span style="color:black;">${theme.price}</span></span>
							<span class="rel_name" style="color:black;">摄影师  |<span style="color:black;"> ${photographer.name}</span></span>
						</div>
						<div class="clear"></div>
						<img class="ka_relgo" src="img/icon/icon_nz_02.png" width="20px" height="20px" >
					</a>
					<div class="relimg" >
						<div class="relimgbg"></div>
					</div>
	
		<div class="kasample_text">
			<div class="phgh_img">
				<img src="${path}${photographer.headPortrait}">
				<div class="dummy"></div>
			</div>
			<div class="phgh_txt">
				<p><span>摄影师 | </span>${photographer.name}</p>
			</div>
			<a class="phgh_go" href="${path}/kaPhotographer?themeId=${themeId}">查看摄影师</a>
		</div><!-- kasample_text -->
		
		<main class="kasampletxt">
			<input id="tab3" type="radio" name="tabs" checked>
			<label for="tab3" class="kasample_tl kasample_tl_l">
				<span>服务流程</span>
				<i><img src="img/icon/icon_img_01.png"></i>
			</label>
  
			<input id="tab4" type="radio" name="tabs">
			<label for="tab4" class="kasample_tl kasample_tl_r">
				<span>服务特色</span>
				<i><img src="img/icon/icon_img_01.png"></i>
			</label>
			<div class="clear"></div>
			<!-- kasampletxt -->
			<section class="kasample_flow" id="content3">
				<ul>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">预约支付 </span>
						线上挑选摄影师及服务样片，选定拍摄时间完成支付。</p>
						<div class="clear"></div>
					</li>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">现场拍摄</span>
						摄影师准时到达指定地点，并在规定时间内保质保量完成拍摄。</p>
						<div class="clear"></div>
					</li>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">线上沟通</span>
						线上挑选所需精修照片，与摄影师直接沟通。</p>
						<div class="clear"></div>
					</li>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">满意收片</span>
						7*24快速精修收片，省时省心。</p>
						<div class="clear"></div>
					</li>
				</ul>
			</section><!-- kasample_flow -->
			<section class="kasample_features" id="content4">
				<ul>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">摄影师</span>
						严格的摄影师筛选制度，多种风格，演绎最真实的完美的你。</p>
						<div class="clear"></div>
					</li>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">拍摄</span>
						标准化拍摄流程，全程跟踪服务，让安全离你更近。</p>
						<div class="clear"></div>
					</li>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">选片</span>
						创新的选片方式，不出家门在线选片，御宅族的福音。</p>
						<div class="clear"></div>
					</li>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">修片</span>
						不满意即重修，你的创意将融入作品，展现最个性的你。</p>
						<div class="clear"></div>
					</li>
					<li>
						<p class="kasampletxt_p"><span class="kasampletxt_tl">收片</span>
						一本5斤重的相册？逊毙了！所有作品云盘获取，方便快捷。</p>
						<div class="clear"></div>
					</li>
				</ul>
			</section><!-- kasample_features -->
		</main>
		<div class="phgh_pho">
			<a href="tel:13851816390"><span></span>联系客服</a>
		</div>
	</div><!-- content_wrap -->
	
	<div class="kasampledet_nav" style="z-index:500;">
		<a href="${path}/kaAppointment?themeId=${themeId}">我要预约</a>
	</div><!-- kasampledet_nav -->
	<div class="footer_copyright">
		<p><span>苏州知行合一网络科技有限公司</span>提供技术支持，版权所有</p>
	</div><!-- footer_copyright -->

	<div id="fade" class="black_overlay"></div><!--弹出层时背景层DIV-->
	<div class="kasampledet_up kasampledeto_up"  id="Mypay">
		<h4>服务详情</h4>
		<p>照片类型：<span>数码</span></p>
		<p>拍摄人数：<span>1－2</span>人</p>
		<p>原片拍摄：<span>>${theme.negative}</span>张（全送）</p>
		<p>精修张数：<span>${theme.decoration}</span>张</p>
		<p>拍摄时长：<span>${theme.duration}</span>小时</p>
		<p>服装提供：<span>不提供</span></p>
		<p>化妆提供：<span>提供</p>
		<p>拍摄场地：<span>外拍（10km内</p>
		<p>交图天数：<span>7</span>天</p>
		<p class="kasampledet_pb">其他费用：<span>拍摄所产生的额外费用
        由用户自行承担</span></p>	
		<div class="kasampledet_close"><span onclick="CloseDiv('Mypay','fade')" class=""></span></div>
	</div>
		<script>
			//弹出隐藏层
			function ShowDiv(show_div,bg_div){
				document.getElementById(show_div).style.display='block';
				document.getElementById(bg_div).style.display='block' ;
				var bgdiv = document.getElementById(bg_div);
				bgdiv.style.width = document.body.scrollWidth;
			// bgdiv.style.height = $(document).height();
				$("#"+bg_div).height($(document).height());
			};
			//关闭弹出层
			function CloseDiv(show_div,bg_div){
				document.getElementById(show_div).style.display='none';
				document.getElementById(bg_div).style.display='none';
			};
			///////////////////////////////////////

		</script>

</body>
</html>